import styled from "styled-components";

/*
* 基于"styled.标签名" 这种方式编写需要的样式
*   + 样式要写在"ES6模板字符串中"
*   + 返回并且导出的结果是一个自定义组件
* */
export const NavBox = styled.nav`
  backgroundColor: lightblue;
  width: 300px;
  .active{
    color: red;
  }
  .title {
    font-size: 20px;
    color: red;

    &:hover {
      color: green;
    }
  }
`
export const NavBarBox = styled.div.attrs(props => {
    return {
        size: props.size || 16,//属性默认值
    }
})`
  line-height: 30px;

  a {
    font-size: ${props => props.size};
    color: #000;
    margin-right: 10px;

    &:hover {
      color: ${props => props.hover};
    }
  }
`